<template>
	<view class="cart">
       <!-- 滑动面板 -->
	   <uni-swipe-action>
	   	<!-- 使用插槽 （请自行给定插槽内容宽度）-->
	   	<uni-swipe-action-item v-for="item,index in list" :key="index">
	   		<view class="list-item">
	   			<!-- 复选框 -->
	   			<label class="radio" @click="checks(item.id)">
	   				<radio :checked="item.check" />
	   			</label>
	   			<!-- 图片 -->
	   			<image :src="item.img" mode="" class="image"></image>
	   			<view class="cart-right">
	   				<!-- 标题 -->
	   				<view class="name">
	   					{{item.name}}
	   				</view>
	   				<view class="cart-cont">
	   					<!-- 价格 -->
	   					<view class="price">
	   						{{item.price}}
	   					</view>
	   					<!-- 数字输入框 -->
	   					<uni-number-box v-model="item.num" @change="(value)=>changeNum(value,item.id)"></uni-number-box>
	   				</view>
	   			</view>
	   		</view>
	   		<template v-slot:right>
	   			<view class="slot-del" @click="del(item.id)"><text>删除</text></view>
	   		</template>
	   	</uni-swipe-action-item>
	   </uni-swipe-action>
	   <!-- 底部 -->
	   <view class="action-bar">
	   	  <label class="radio" @click="checkAll">
	   	  	<radio :checked="isCheckAll"/><text>全选</text>
	   	  </label>
		  <view class="action-bar-right">
		  	<view class="">
		  		合计：￥{{getTotal}}
		  	</view>
			<button class="sumbit-btn" @click="submitOrder">提交订单</button>
		  </view>
	   </view>
	</view>
</template>

<script>
	let app = getApp()
	console.log(app);
	export default {
		data() {
			return {
				activeKey:0,
				list:[],//接受购物车的数据
				isCheckAll:false,//全选的初始状态
			};
		},
		onLoad() {
			this.list = app.globalData.cartList
			console.log(app.globalData.cartList);
		},
		onShow() {
			// 页面显示就调用微标
			app.setBandge()
		},
		// 计算属性
		computed:{
			getTotal(){
				let total = 0
				this.list.forEach(item=>{
					// 选中的才计算总计 
					if(item.check){
						total+=item.price*item.num
					}
				})
				return total
				
			}
		},
		methods:{
			// 点击全选的方法
			checkAll(){
				// 手动取反
				this.isCheckAll = !this.isCheckAll
				app.changeAll(this.isCheckAll)
			},
			// 点击单选
			checks(id){
				app.changeChecks(id)
			},
			// 删除
			del(id){
				console.log(id);
				app.delGoods(id)
			},
			// 修改数量
			changeNum(value,id){
				console.log(value,id);
				app.changeNum(value,id)
			},
			// 提交订单
			submitOrder(){
				// some()只要有一个满足条件,就返回true
				let flag = this.list.some(item=>item.check == true)
				if(!flag){
					return uni.showToast({
						title:"请勾选你要下单的商品"
					})
				}else{
					// 跳转到订单页面
					uni.navigateTo({
						url:'../order/order'
					})
				}
			}
			
		},
		watch:{
			list:{
				handler(newVal){
					console.log(newVal);
				this.isCheckAll	= newVal.every(item=>item.check == true)
				},
				deep:true,//因为监听的是数组对象的内部状态
				immediate:true,//一进入页面就监听
			}
		}
	}
</script>

<style lang="scss">
.list-item{
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eee;
	padding: 10rpx 20rpx;
	.image{
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
		flex-shrink: 0;///防止内容压缩
		margin:0 10rpx;
	}
	.cart-right{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 220rpx;
		font-size: 28rpx;
		.cart-cont{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price{
				color:#c00;
				font-weight: 700;
			}
		}
	}
	
	
}
.slot-del{
	width: 120rpx;
	display: flex;
	height: 100%;
	justify-content:center;
	align-items: center;
	font-size: 24rpx;
	background-color: #c00;
	color: #fff;
}
.action-bar{
	position: fixed;
	bottom: 0;
	left:0;
	width: 100%;
	height: 100rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #ccc;
	background: #fff;
	.action-bar-right{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.sumbit-btn{
			margin-left: 20rpx;
			background: #c00;
			font-size: 24rpx;
			color: #fff;
			border: none;
		}
	}
}
</style>
